<!--
 * @Description: 
 * @Autor: dong jun hua
 * @Date: 2020-07-08 16:06:00
 * @LastEditors: Qun
 * @LastEditTime: 2021-08-31 13:14:21
-->

<template>
  <div class="frame-container">
    <iframe :src="url" class="frame"></iframe>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs, watch } from 'vue';
import { useRoute } from 'vue-router';
export default {
  name: 'Outer',
  setup() {
    const route = useRoute();

    const data = reactive({
      url: ''
    });

    const setFrameHeight = () => {
      const container = document.querySelector('.frame-container');
      if (container) {
        const frame = document.querySelector('.frame');
        const height = container.offsetHeight;
        frame.style.height = `${height}px`;
      }
    };

    onMounted(() => {
      data.url = route.query.url;
      setFrameHeight();
      window.addEventListener('resize', setFrameHeight);
    });

    watch(
      () => route.query,
      () => {
        data.url = route.query.url;
      }
    );
    return {
      ...toRefs(data)
    };
  }
};
</script>

<style scoped>
.frame-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* width: 100%;
  height: 800px; */
}
.frame {
  width: 100%;
  border: none;
}
</style>
